<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div style="text-align:center"> add to list<input type="text" v-model="newTask"/> <button @click="addTask">添加</button></div>
    <div style="text-align:center" v-if="taskList.length>0">
        <ul >
            <li v-for="(value,index) in taskList" :key="index">
                {{value}}<button @click="removeTask(index)">remove</button>
            </li>
        </ul>
    </div>
    <div v-else style="text-align:center">没有任务列表</div>
</div>

<!--引入vue文件-->
<script type="text/javascript" src="js/vue-2.6.12.js"></script>
<script>
    const v=new Vue({
        el:"#app",
        data:{
            taskList:["aaa","bbb"],
            newTask:""
        },
        methods:{
            removeTask:function(i){
                this.taskList.splice(i,1);
            },
            addTask(){
                this.taskList.push(this.newTask);
            }
        }
    });

</script>
</body>
</html>